<div class="toaster-container">
  <ul class="toaster">
    <li ng-repeat="notif in list" kbn-toast notif="notif">
      <div ng-class="notif.getAlertClass()">

        <span ng-show="notif.count > 1" class="badge">{{ notif.count }}</span>

        <i ng-class="notif.getIconClass()" tooltip="{{notif.title}}"></i>

        <kbn-truncated
          ng-if="notif.content"
          source="{{notif.content | markdown}}"
          is-html="true"
          length="250"
          ng-class="notif.getToastMessageClass()"
        ></kbn-truncated>

        <render-directive
          ng-if="notif.directive"
          definition="notif.directive"
          notif="notif"
          ng-class="notif.getToastMessageClass()"
        ></render-directive>

        <div class="kuiButtonGroup" ng-class="notif.getButtonGroupClass()">
          <button
            type="button"
            ng-if="notif.stack && !notif.showStack"
            class="kuiButton"
            ng-class="notif.getButtonClass()"
            ng-click="notif.cancelTimer(); notif.showStack = true"
          >
            More Info
          </button>
          <button
            type="button"
            ng-if="notif.stack && notif.showStack"
            class="kuiButton"
            ng-class="notif.getButtonClass()"
            ng-click="notif.showStack = false"
          >
            Less Info
          </button>
          <button
            data-test-subj="notifierDismissButton"
            type="button"
            ng-if="notif.accept"
            class="kuiButton"
            ng-class="notif.getButtonClass()"
            ng-click="notif.accept()"
          >
            OK
          </button>
          <button
            type="button"
            ng-if="notif.address"
            class="kuiButton"
            ng-class="notif.getButtonClass()"
            ng-click="notif.address()"
          >
            Fix it
          </button>
          <button
            type="button"
            class="kuiButton"
            ng-repeat="action in notif.customActions"
            ng-class="action.getButtonClass()"
            ng-click="action.callback()"
            ng-bind="action.key"
            data-test-subj="{{action.dataTestSubj}}"
          ></button>
        </div>

        <!-- Countdown badge -->
        <button
          type="button"
          ng-if="notif.isTimed()"
          class="toaster-countdown"
          ng-click="notif.cancelTimer()"
        >
          <span
            class="badge"
            hover-text="stop"
          >
            {{notif.timeRemaining}}s
          </span>
        </button>
      </div>

      <div ng-if="notif.stack && notif.showStack" ng-class="notif.getAlertClassStack()">
        <pre ng-repeat="stack in notif.stacks" ng-bind="stack"></pre>
      </div>

    </li>
  </ul>
</div>
